// 不要在render函数中使用HOC

import { Button } from 'antd';
import React from 'react';

function HOC(Component: any) {
  return class Index extends React.Component {
    render() {
      return <Component />;
    }
  };
}

class Home extends React.Component {
  constructor(props: any) {
    super(props);
    // 重新初始化 这是不符合预期的
    console.log('constructor');
  }
  render() {
    console.log('home render');
    return <div>Home</div>;
  }
}

export default class Index extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    console.log('init');
    this.state = {
      number: 0,
    };
  }

  handleClick = () => {
    this.setState({ number: this.state.number + 1 });
  };

  // WrapHome = HOC(Home);

  render() {
    console.log('index render');
    // 每次都是一个新的组件 dom-diff会判断两次不是同一个组件不会复用 性能的浪费
    const WrapHome = HOC(Home);
    return (
      <>
        {/* <this.WrapHome /> */}
        <WrapHome />
        {/* <Home /> */}
        <p>{this.state.number}</p>
        <Button type="primary" onClick={this.handleClick}>
          +
        </Button>
      </>
    );
  }
}
